<template>
	<div class="jcjz-box">
		<pol-title title="浇次节奏"></pol-title>
		<div class="flex-between padding-lg border-solid bg-tm radius-sm" style="height: 260px;">
			<div class="">
				<div class="flex align-center justify-center progress-box" :style="`border: 1px solid ${timer > 120 ? '#ff4949;' : '#0474bf'}`">
					<el-progress :status="timer > 120 ? 'exception' : ''" type="circle" :percentage="percentage1" :indeterminate="true" :width="140" :stroke-width="10" style="--el-fill-color-light: transparent">
						<template #default="{ percentage }">
							<div class="progress-content-box flex justify-center align-center text-lg">
								<div>
									<div class="text-white">
										<span style="font-size: 36px;">{{timer < 60 ? '3' : timer < 120 ? '2' : '1'}}</span>
										min
									</div>
									<div class="text-white margin-top-sm text-sm">预计剩余</div>
								</div>
							</div>
						</template>
					</el-progress>
				</div>
				<div class="text-white margin-top text-center text-lg">已经浇铸：20min</div>
			</div>

			<div class="">
				<div class="flex align-center justify-center progress-box">
					<el-progress type="circle" :percentage="80" :indeterminate="true" :width="140" :stroke-width="10" style="--el-fill-color-light: transparent">
						<template #default="{ percentage }">
							<div class="progress-content-box flex justify-center align-center text-lg">
								<div>
									<div class="text-white">
										<span style="font-size: 36px;">18</span>
										min
									</div>
								</div>
							</div>
						</template>
					</el-progress>
				</div>
				<div class="text-white margin-top text-center text-lg">距下一炉开始浇铸还有</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	
	const percentage1 = ref(0)
	const timer = ref(0)
	setInterval(()=>{
		if(timer.value == 180) timer.value = 0
		timer.value++
		percentage1.value = Math.floor(timer.value / 180 * 100)
	}, 1000)
</script>

<style lang="scss" scoped>
	.jcjz-box {
		flex: 0 0 450px;

		.progress-box {
			width: 170px;
			height: 170px;
			border: 1px solid #0474bf;
			border-radius: 50%;
		}

		.progress-content-box {
			width: 100px;
			height: 100px;
			margin-left: 20px;
			background-color: rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			background-image: url('/src/assets/images/roun-bg.png');
			background-size: 100% 100%;
		}
	}

	
</style>